<!--<template>
  <el-form label-width="100px" label-position="left">
    <el-row v-for="(row, index) in formrow" :key="index" :gutter="20">
      <el-col v-for="(col, i) in row" :key="col.AUTOID" :span="12">
        <slot></slot>
       插槽 
      </el-col>
    </el-row>
  </el-form>
</template>-->

<script>
export default {
  name: "meiform",
  data() {
    return {
      elform: {}
    };
  },
  //外部属性
  props: {
    //列数
    colnub: {
      type: Number,
      default() {
        return 2;
      }
    }
  },
  render(h) {
    //计算的行 和 列 [[form-item],[form-item]] newrow[0][0]
    let newrow = [],
      span = 12; //份数
    if (this.$slots.default) {
      const len = this.$slots.default.length, //长度
        count = this.colnub, //一行的长度
        lineNum = len % count === 0 ? len / count : Math.floor(len / count + 1); //行数
      span = 24 % count === 0 ? 24 / count : Math.floor(24 / count - 1); //行数
      for (let i = 0; i < lineNum; i++) {
        const temp = this.$slots.default.slice(i * count, i * count + count);
        newrow.push(temp);
      }
    }

    const html = h(
      //form
      "el-form",
      {
        //组件属性 attrs
        props: {
          //注意驼峰写法
          labelWidth: "100px",
          labelPosition: "left",
          //属性
          ...this.$attrs
        },
        on: {
          //事件
          ...this.$listeners
        },
        ref: "elform"
      },
      newrow.map((row, index) => {
        //行
        return h(
          "el-row",
          {
            props: {
              gutter: 20
            },
            key: index
          },
          row.map((col, i) =>
            //列
            h(
              "el-col",
              {
                props: {
                  span: span
                },
                key: i
              },
              [col] //插槽
            )
          )
        );
      })
    );
    //返回elform
    this.$nextTick(() => {
      this.elform = this.$refs.elform;
    });
    return html;
  },
  //内部方法
  methods: {
    initPage() {}
  },
  //组件
  components: {},
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {},
  //监视
  watch: {}
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
</style>
